<template>
  <div class="container">
    <div class="header"></div>
    <div class="content">
      <div class="left">
        <title-card title-text="天然气经营规模">
          <template v-slot>
            <div class="card-content">
              <div class="sub-title">火电装机容量</div>
              <div class="sum-capacity">
                <div>
                  <span class="sum"> 104433.87</span>
                  <span class="unit">(万立方米)</span>
                </div>
                <div>
                  <svg-icon name="tianranqi"></svg-icon>
                  <span class="desc-text">天然气经营规模</span>
                </div>
              </div>
              <div class="bar-chart">
                <vue-base-echart :option="barOption"></vue-base-echart>
              </div>

              <div class="sub-title">社会用气事故</div>
              <div class="ring-chart-box">
                <div class="ring-chart">
                  <vue-base-echart :option="shRingOption"></vue-base-echart>
                </div>
                <div class="ring-chart-legend">
                  <div class="legend-title">共计2起</div>
                  <div>
                    <span class="legend-item-text hurt">受伤</span><span class="legend-item-value">1</span>
                  </div>
                  <div>
                    <span class="legend-item-text die">死亡</span><span class="legend-item-value">1</span>
                  </div>
                </div>
              </div>

              <div class="line-chart">
                <vue-base-echart :option="twoLineOption"></vue-base-echart>
              </div>
            </div>
          </template>
        </title-card>
      </div>

      <div class="center">
        <div class="tabs">
          <div :class="['tabs-item',{'activeTab':item.value===activeTabValue}]" v-for="(item, i) in tabList" :key="i"
               @click="changeActive(item.value)">
            <svg-icon :name="item.iconName" color="#C91500"></svg-icon>
            <!--            <svg-icon :name="item.iconName" :color="item.value===activeTabValue?'#C91500':'#000000'"></svg-icon>-->
            <span class="tab-text"> {{ item.name }}</span>
          </div>
        </div>
        <div class="center-content">
          <title-card
              title-text="主业发展"
              title-icon="zhuyingyewushouru"
              height="calc(100% - 69px)"
          >
            <template v-slot>
              <div class="card-content">
                <div class="sub-title" style="margin-top: 20px">天然气入网供应量</div>
                <div class="rw">
                  <div class="rw-total">
                    <svg-icon name="circleFire" width="38px" height="38px"></svg-icon>
                    <span>1368.98</span>
                    <span>天然气入网供应量</span>
                    <span>(单位：立方米)</span>
                  </div>
                  <div class="rw-chart">
                    <vue-base-echart :option="zkBarOption"></vue-base-echart>
                  </div>
                </div>

                <div class="sub-title" style="margin-top: 30px">集团发电详情</div>
                <div class="rw">
                  <div class="rw-total">
                    <svg-icon name="circleFire" width="38px" height="38px"></svg-icon>
                    <span>435.68</span>
                    <span>天然气入网分销量</span>
                    <span>(单位：立方米)</span>
                  </div>
                  <div class="rw-chart">
                    <vue-base-echart :option="sjzBarOption"></vue-base-echart>
                  </div>
                </div>
              </div>
            </template>
          </title-card>
        </div>
      </div>

      <div class="right">
        <title-card title-text="天然气购销差">
          <template v-slot>
            <div class="card-content">
              <div class="sub-title">综合统计</div>
              <div class="zh-chart">
                <vue-base-echart :option="jbLineChat"></vue-base-echart>
              </div>
              <div class="sub-title">各公司统计</div>
              <div class="ggs-chart">
                <vue-base-echart :option="ringOption"></vue-base-echart>
              </div>
            </div>
          </template>
        </title-card>
      </div>
    </div>
  </div>
</template>

<script>
import vueBaseEchart from "_c/vue-base-echart";
import TitleCard from "_c/TitleCard";
import {barChat, jbLineChat, ringOption, ringOptionNew, sjzBarOption, twoLineOption, zkBarChat} from "_u/chatsOptionFn";

export default {
  components: {TitleCard, vueBaseEchart},
  data() {
    return {
      activeTabValue: '2',
      tabList: [
        {name: "电力板块", iconName: "shandian", value: '1'},
        {name: "燃气板块", iconName: "ranqi", value: '2'},
        {name: "金融板块", iconName: "jinrong2", value: '3'},
        {name: "战新板块", iconName: "zhanlve", value: '4'},
      ],
      // 柱状图配置
      // barOption:barChat()
      barOption: barChat(),
      zkBarOption: zkBarChat(),
      jbLineChat: jbLineChat(),
      sjzBarOption: sjzBarOption(),
      twoLineOption: twoLineOption(),
      ringOption: ringOptionNew({
        color: ['#6093F9', '#7AB4CE', '#61C7FC', '#97B2E8', '#6CDBFB', '#6D87FE', '#6AD4CC'],
        dataArr: [{name: '管网', value: 4}, {name: '大众', value: 3}, {name: '市北', value:2}, {
          name: '青浦',
          value: 1
        }, {name: '浦销', value: 1}, {name: '金山', value: 1}, {name: '崇明', value: 1}],
        position: ["50%", "25%"],
        radius1:["55", "76"],
        radius2:["85", "86"],
        radius3:["45", "46"],
        show:true
      }),
      shRingOption: ringOptionNew()
    };
  },
  methods: {
    changeActive(v) {
      this.activeTabValue = v
    }
  },
  mounted() {
    console.log(barChat())
  }
};
</script>

<style scoped lang="scss">
.container {
  .header {
    width: 100vw;
    height: 88px;
    background: #ffffff;
  }

  .sub-title {

    margin-bottom: 20px;

    font-family: 思源黑体;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.05em;
  }

  .content {
    height: calc(100vh - 88px);
    background: #d3d7db;
    width: 100vw;
    padding: 20px;
    box-sizing: border-box;

    display: flex;
    justify-content: space-between;

    .left {
      width: 25vw;
      height: 100%;

      .sum-capacity {
        background: #efeff0;
        width: 378px;
        border-radius: 4px;
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;

        .sum {
          font-size: 36px;
          font-weight: 600;
          letter-spacing: 0.05em;
        }

        .unit {
          color: #cccccc;
          font-size: 14px;
          color: #777778;
        }

        .desc-text {
          font-family: 思源黑体;
          font-size: 20px;
          font-weight: normal;
          color: #000000;
          margin-left: 12px;
        }
      }

      .bar-chart {
        width: 100%;
        height: 160px;
        margin-bottom: 10px;
        margin-top: 10px;

      }

      .ring-chart-box {
        display: flex;

        .ring-chart-legend {

          margin-top: 30px;

          .legend-title {
            font-family: 思源黑体;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0.05em;
            color: #000000;
            margin-bottom: 10px;
          }

          .legend-item-text, legend-item-value {
            font-family: 思源黑体;
            font-size: 15px;
            font-weight: normal;
            letter-spacing: 0.05em;
            color: #000000;

          }

          .legend-item-text {
            padding-right: 66px;
            position: relative;
            margin-left: 20px;

            &:before {
              position: absolute;
              content: '';
              width: 10px;
              height: 10px;
              border-radius: 50%;
              left: -20px;
              top: 5px;
            }
          }

          .hurt:before {
            background: #6093F9;
          }

          .die:before {
            background: #7AB4CE;
          }
        }


        .ring-chart {
          width: 50%;
          height: 130px;
        }
      }


      .line-chart {
        width: 100%;
        height: 200px;
      }
    }

    .center {
      width: 45vw;
      height: 100%;

      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .tabs {
        width: 100%;
        height: 49px;
        border-radius: 4px;
        background: #ffffff;

        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        margin-bottom: 20px;


        display: flex;
        align-items: center;
        justify-content: space-around;

        .tabs-item {
          cursor: pointer;
        }

        .activeTab {
          position: relative;
        }

        .activeTab::after {
          content: '';
          position: absolute;
          bottom: -13px;
          left: -22px;
          width: 160px;
          height: 3px;
          opacity: 1;

          /* 主色红 */
          background: #C91500;
        }

        .tab-text {
          font-size: 19px;
          font-weight: normal;
          letter-spacing: 0.05em;
        }
      }

      .center-content {
        flex: 1;
      }

      .rw {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .rw-total {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 183px;
          background: #EFEFF0;
          border-radius: 8px;
          padding: 25px 0 41px;

          :nth-child(2) {
            font-family: 思源黑体;
            font-size: 28px;
            font-weight: 500;
            line-height: 28px;
            color: #000000;
            margin: 18px 0;
          }

          :nth-child(3) {
            font-family: 思源黑体;
            font-size: 14px;
            font-weight: normal;
            line-height: 14px;
            letter-spacing: 0.05em;

            color: #000000;
            margin-bottom: 12px;
          }

          :nth-child(4) {
            font-family: 思源黑体;
            font-size: 12px;
            font-weight: normal;
            line-height: 12px;
            letter-spacing: 0.05em;
            color: #797C86;
          }


        }

        .rw-chart {
          width: 580px;
          height: 240px;
          margin-right: 20px;
        }
      }
    }

    .right {
      width: 25vw;
      height: 100%;

      .zh-chart {
        width: 100%;
        height: 220px;
        margin-bottom: 40px;
      }

      .ggs-chart {
        width: 100%;
        height: 360px;
      }
    }

    .card-content {
      padding: 20px;
      box-sizing: border-box;
    }
  }
}
</style>
